import React from 'react';
import {
  Form,
  Input,
  InputNumber,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
} from 'antd';
import {getProductCategoryList} from '../../../../../../api/pms/productCategoryApi.js'
import {getBrandList} from '../../../../../../api/pms/brand.js'
const { Option } = Select;
const { TextArea } = Input;
export default  class extends React.Component{
	state={
		productCategoryOptions:[],
		brandList:[],
	}
	componentDidMount(){
		
		
		
		getProductCategoryList().then(data=>{
				 data.data.forEach(item=>{
					 item.value = item.id;
					 item.label = item.name;
					 if(item.children){
						 item.children.forEach(item2=>{
							 item2.value = item2.id;
							 item2.label = item2.name;
						 })
					 }
				 })
				 this.setState({
					productCategoryOptions:data.data
				 })
		})
		getBrandList()
		.then(data=>{
			this.setState({
				brandList:data.data
			})
		})
	}
	
	handleBrandChange=(value)=>{
		
	}
	render(){
		
		const {handleStep,productData} = this.props;
		
		let brandSelect = "";
		if(this.state.brandList){
			brandSelect = this.state.brandList.map(item=>{
				return <Option value={item.id}>{item.name}</Option>
			})
		}
	  const onFinish = (values) => {
		  //对象的合并.要将values里面的值给到productData里面去
		  
		  values.productCategoryId = values.category[1];
		  
		  let pcOptions = this.state.productCategoryOptions;
		  console.log("pcOptions",pcOptions)
		  
		  if(pcOptions){
			pcOptions.forEach(item=>{
			  item.children.forEach(item2=>{
				  if(item2.value == values.productCategoryId){
					  values.productCategoryName = item2.label;
				  }
			  })
			})
		  }
		  
		  //得到品牌名称
		  //value就是选中的品牌id
		  let blist = this.state.brandList;
		  if(blist){
		  	blist.forEach(item=>{
		  		if(item.id == values.brandId){
		  			values.brandName=item.name;
		  		}
		  	})
		  }
		  
		  console.log('第一个表单，info的所有数据: ', values);
		  Object.assign(productData,values);
		  console.log('第一个表单合并完成，info的所有数据: ', productData);
		  handleStep(1);
		};
	  return <><Form
		name="proinfo"
		onFinish={onFinish}
		style={{marginTop:'20px'}}
	  >
		<Form.Item
			style={{textAlign:'left',width:'300px'}}
			name="category"
			label="商品分类"
			rules={[
			  {
				required: true,
				message: '请输入商品分类',
			  },
			]}
		>
		  <Cascader options={this.state.productCategoryOptions} placeholder='请选择'/>
		</Form.Item>
		<Form.Item
			name="name"
			label="商品名称"
			rules={[
			  {
				required: true,
				message: '请输入商品名称',
			  },
			]}
		>
		  <Input />
		</Form.Item>
		<Form.Item
			style={{marginLeft:'14px'}}
			name="subTitle"
			label="副标题"
			rules={[
			  {
				required: true,
				message: '请输入副标题',
			  },
			]}
		>
		  <Input />
		</Form.Item>
		<Form.Item
			style={{marginLeft:'27px',textAlign:'left',width:'300px'}}
			name="brandId"
			label="品牌"
			rules={[
			  {
				required: false,
				message: '请输入品牌',
			  },
			]}
		>
		  <Select onChange={this.handleBrandChange} allowClear placeholder='请选择品牌'>
				{brandSelect}
		  </Select>
		</Form.Item>
		<Form.Item
			style={{marginLeft:'10px',textAlign:'left'}}
			name="description"
			label="商品介绍"
		>
			<TextArea placeholder='请输入内容'/>
		</Form.Item>
		<Form.Item
			style={{marginLeft:'10px'}}
			name="productSn"
			label="商品货号"
		>
		  <Input />
		</Form.Item>
		<Form.Item
			style={{marginLeft:'10px'}}
			name="price"
			label="商品售价"
			initialValue={0}
		>
		  <Input />
		</Form.Item>
		<Form.Item
			style={{marginLeft:'24px'}}
			name="originalPrice"
			label="市场价"
			initialValue={0}
		>
		  <Input />
		</Form.Item>
		<Form.Item
			style={{marginLeft:'10px'}}
			name="stock"
			label="商品库存"
			initialValue={0}
		>
		  <Input />
		</Form.Item>
		<Form.Item
			style={{marginLeft:'10px'}}
			name="unit"
			label="计量单位"
		>
		  <Input />
		</Form.Item>
		<Form.Item
			style={{marginLeft:'10px'}}
			name="weight"
			label="商品重量"
		>
		  <Input />
		</Form.Item>
		<Form.Item
			style={{marginLeft:'38px'}}
			name="sort"
			label="排序"
			initialValue={0}
		>
		  <Input />
		</Form.Item>
	  <Button type="primary" htmlType="submit">下一步,填写商品促销</Button>
	  </Form>
	  </>
  }
	
} 